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Abstract of JP 2001175691 (A) 
PROBLEM TO BE SOLVED: To provide a method 
and a system for displaying hierarchically related 
information. SOLUTION: A display system displays 
information relating various categories in a layer on 
a display and then the information is scrolled on the 
display. When a user selects displayed information 
for a category, the display system displays 
information relating to a subcategory in the selected 
category and then the information is scrolled on the 
display. The display system scrolls the information 
cyclically so that the beginning of the information 
follows up the end of the information. Further, the 
display system dynamically generates a page 
containing the information. After a request to retrieve 
information is received to dynamically generate the 
display page, the display system retrieves 
information wherein the category and subcategory 
are described from a database. 
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1 . Title of tho Invention 

METHOD AND SYSTEM FOR GENERATING WEB PAGES WIT1 1 
INFORMATION DISPLAYED IN A CAROUSEL 

2 . ClBiBB 

1 . A method in a computer system for generating web pages for browsing 
through a hierarchy, the hierarchy having categories and sub-categories, the method 
comprising: 

receiving an indication of a category to display; 

retrieving information relating to the sub-categories of the indicated 

category; and 

adding to a web page information describing the retrieved information 
wherein when the web page is displayed the retrieved information is automatically scrolled 
on a display so that a user can view the retrieved information as it is scrolled. 

2. The method of claim I wherein the user can control the speed of the 

scroll. 

3. The method of claim I wherein the user can control lite direction of the 

scroll. 

4. The method of claim 1 including adding a speed scroll area to U»e web 
page llmt the user can use to control the speed and direction of the scrolling. 

5. The method of claim I including sending the web page to a .client 
computer via the Internet. 

6. The method of claim 1 wherein the retrieved information is scrolled in a 
rotating manner. 

7. The method nf claim I wherein the retrieved information includes 
images relating to the subcategories. 

«, The method of claim I including retrieving information relating to items 
and adding the retrieved information to the web page, 
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9. A method in a computer system Tor displaying hierarchically related 
information, the method comprising: 

displaying information relating to a plurality or categories within the 
hierarchy wherein the displayed information is scrolled on a display; and 

when a catepny is selected, displaying inforraation relating to a 
plurality of sub-categories within the selected category wherein the displayed information is 
scrolled on the display. 

10. The method of claim 9 wherein the displaying is based on display pages 
that arc dynamically generated. 

11. The method of claim 9 wherein a user can control the speed and 
direction of the scrolling using an area that is separate from the area in which the information 
is displayed. 

12. The method of claim 9 wherein the information is a-rolled in a rotating 
3. Detailed Description ol the Invention 



TECHNICAL FIELD 

The present invention relates generally to displaying of information and. more 
particularly, to displaying of information within a carousel 

BACKGROUND 

Because die Internet facilitates electronic communications between vendors 
and purchasers, it is increasingly being used to conduct "eleittonic commerce." The Internet 
facilitates electronic commerce because it comprises a vast number of computers and 
computer networks that arc interconnected through communication channels. Thus, many 
purchasers and vendors can communicate electronically using Ihc Internet. Electronic 
commerce refers Rencrally to commercial transactions that arc ar least partially conducted 
using the computer systems of the parties to the transactions. Vox example. » purchaser can 
use a personal computer to connect via the Internet to a vendor's computer. The purchaser 
can then interact with the vendor's computer to conduct the transaction 
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The World Wide Web portion of the Internet is especially conducive to 
conducting electronic commerce. Many web servers have been developed through which 
vendors can advertise and sell products. The products can include items [e.g., music) drat 
nre delivered electronically to the purchaser over the Internet and items (n. k . books) that ure 
delivered through conventional distribution channels (e.#, a common carrier). More 
generally, an item is any product, service, or exchangeable entity of any type. A server 
computer system may piovidc an electronic version of a catalog lliat lists the items that arc 
availHhle Hi be purchased. A user, who is a potential purchaser, may browse throiigh the 
catalog using a browser and select various items that arc to be purchased. When the user has 
completed selecting the items to be purchased, the server computer system Ihcn prompis tbe 
user for inlbnnnlion to complete the ordering of the items. litis order information may 
include the purchaser's name, the purchaser's eiwiit card number, and a shipping address for 
the order, The server computer system then typically confirms Ore order by sending a 
confirming web page to the client computer system and schedules shipment of the items. 

Hie items within a catalog arc often organized hicrarchjcally into categories 
and sub-categories. To view information Ibat is hierarchically organized, web pages may be 
provided for ullowing n user to browse through the hierarchy When browsing the hierarchy, 
a list of categories is displayed When a user selects a listed category, another web page is 
provided that lists the sub-categories within the scledcd category. When a user selects a 
category thai has no sub-categories, then a web page with information describing the items 
within that category is provided The user can then select an item to view more detailed 
information about the item or to place on order to purchase the item. For example, if the 
catalog describes electronic equipment, one category may be computers and its sub- 
categories may be personal computers, business computers, and mainframe computers. The 
personal compmer suo-catcgory may include sub-caregorics such as IBM-compatible and 
Apple. 
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When information is provided on a wcl> page, it is not always possible to have 
all the information visible simultaneously. For example, if a category has 20 or 30 items ii 
may not be possible to display an image and a textual description of each item 
simultaneously on a display. Conventional browsers allow users to scroll through such 
information on a web page Typically, a user selects a thumb on a scroll bar to manually 
scroll through the information. The use of such a scrolling technique, however, can be 
disadvantage. In particular, users may be reluctant to spend the time to scroll through the 
informaiion on a web page. Also, novice users may not knr>w how to use the manual 
scrolling technique to access the nonviable information. In cither case, the user would only 
view information at tlw beginning of the web page Thus, such users would be unlikely to 
purchase items tlml are not displayed at the beginning of the web page. 

it would be desirable to have a system in which hierarchically organised data 
can be displayed in such a way that avoids the disadvantage of having to manually scroll 
through the information relating to sub-categories and items. 

SUMMARY OF THE INVENTION 

A computer-based method and system for displaying hierarchically related 
information is provided The display system displays on a display information related to 
various categories within the hierarchy. The displayed information scrolls across the display 
so that a user need not continually interact with the computer to scroll the information. 
When a user selects the displayed information for a category, the display system displays 
information relating to sub-categories within the selected category so that that information 
scrolls across the display. In one embodiment, the display system scrolls the information m a 
rotating manner such that the start of the information follows the end of the information and 
vice versa. The display system may also djynamicalty generate display pages web 
pages) that contain the information The display system may retrieve the information 
describing the categories and sub-categories from a database after a request to retrieve the 
information is received to dynamically generate the display page. In this way, the scrolled 
information need not be statically defined in a web page prior to receiving the request. The 
display system may also allow a user to control the speed and direction of scrolling. In one 
embodiment, the display system displays the information in a scroll area and provides a 
separate speed scroll area through which a user can specify the speed and direction of the 
scrolling. The speed and direction of the scrolling may be indicated by the distance and 
direction of the cursor from the center of the speed small area. 
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DETAILED DESCRIPTION OF THE INVENTION 

A method and system for displaying information within a carousel is provided 
In one embodiment, tlic display system generates web pages for browsing through a 
lucrardiy of categories. The display system dynamically generates a web page when it 
receives a request for a web page relating to a selected category. In response to receiving the 
request, the display system retrieves information relating to the sub-eategDries of lire selected 
category. The display system then generates a web page for displaying the retrieved 
information. When the web page is displayed, the information is displayed in an automatic 
scroll area. An automatic scroll area is an area in which the information is automatically 
scrolled cither horizontally or vertically without continual interaction by a user. In one 
embodiment, the scroll area is referred to as a "carousel," because the display system scrolls 
the information in a totaling manner, that is the end of the information ts followed by the 
heginning of information in a continuous loop. 

The display space system allows the user to select information being displayed 
within the scroll area. The information may be selected in various ways (e.g., mouse over or 
clicking). In one embodiment, when a user moves the cursor over information in the scroll 
area, tlw display system displays additional related infonnation outside the scroll area. 
When the user clicks on information in the scroll area, the display system displays another 
web page relating to the selected information. For example, if information relating to various 
categories is currently being displayed in the scroll area, then when the user clicks on 
information in one category, the display system dynamically generates a web page with a 
scroll area that contains information relating to the sub-categories of the selected category. 
In thus say. the scroll area can be used to browse through d>c entities (i.e., categories and 
items) of a hierarchy. The display system generates ll<c web pages dynamically by accessing 
information describing the browse hierarchy which may be stored in a database. The 
information related to an entity may include images and textual description of the entity, 
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The display system allows a user to selecl (he speed and directum of the 
scrolling. In one embodiment, lite display system provides a speed scroll arcn through which 
n user can indicate the speed and direction of the scrolling. When a user selects the right half 
of the speed scroll area, the information in die scroll area scrolls to the left to browse to 
information to the right. When the user selects the left half of the speed scroll area, die 
information in the scroll area scrolls to right to browse to information to the left. Tito 
distance from the center of the speed scroll area that the user selects indicates the speed of 
the scrolling. In particular, when the user selects a portion of the speed scroll area that is 
farthest from the center, then the scrolling is the fastest. When the user selects the center of 
the speed scroll area, the scrolling slops. The selection of a portion of the speed scroll area 
may occur when the user positions tbc cursor over the speed scroll area. When a user moves 
the cursor outside of the speed scroll area, the scrolling may continue at the last designated 
speed and direction or it may stop. For example, if a user moves the cursor from the speed 
scroll area to the scroll area, the display system may stop the scrolling to allow the user an 
opportunity to select Information in the scroll area. In one embodiment, the display system 
may decelerate the scrolling when stopping, rather than immediately stopping to present a 
more visually pleasing effect. 

Figures 1-6 illustrate example web pages generated by the display system in 
one embodiment In this example, the display system allows users to browse through items 
that ate for sale in a furniture store. The items in the furniture store are hierarchically 
organised (e.g., "bedrooms" and "master bedroom"). Figure I illustrates the layout of a web 
page that uses a carousel. Web page 100 includes a hierarchy path area 101. scroll area 102, 
speed scroll area 103, category information area 104, sub-category information area 105, and 
navigation area 106, The hierarchy path area lists the names of the categories in the path 
from the root category of the hierarchy to the currently selected category. In this example, 
the web page is displaying information for the category "shop by lifestyle." The scroll area 
includes information relating to the sub-categories of "coastal" 107, • classic" 108, "linglisb 
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country" 109, and "urban" 1 10. The information for each sub-category includes an image 
related to (hat sub-calcgory. The speed scroll area, in this example, is separate from the 
scroll area. When a user positions ihe cursor within the speed scroll area, the speed of the 
scrolling is adjusted. When the cursor is positioned in the right half of the speed scroll area, 
then the information in me scroll area is scrolled to the left as a new information is displayed 
un the right. When the cursor is positioned in the left half of Ihe speed scroll area, then the 
information in the scroll area is scrolled to the right as new information is displayed on the 
left. The distance from the center point 1 1 1 of die speed scroll area indicates the speed of 
the scrolling. When the cursor is positioned at the left-most or right-most part of the scroll 
area, then scrolling is at its highest speed. The category information area displays 
information relating to Ihe currently selected category which in this example is the "shop by 
lifestyle" category. When the user positions the cursor over information in the scroll area, 
then the display system displays additional information related to the corresponding sub- 
category in the sub-category information area. In this example, the subcategory information 
area is displaying information relating to the "English country" sub-category. The navigation 
area allows the user to select various other web pages such as a shopping basket web page. 

Figure 2 illustrates the scrolling of the information in a carousel of a web page. 
Web page 200 corresponds to web page 100 with the information in its carousel scrolled to 
the left. In this example, scroll area 202 contains information relating to the sub-categories 
scrolled in from the left relative to the information in scroll area 102 of Figure ». For 
example, the information for the "urban" sub-category is shown at position 1 10 in Figure I 
and is shown moved lo lite left at position 210 in Figure 2. As the information in the scroU 
area is scrolled lo the left, information for additional sub-categories is displayed at the right 
hi litis example, information relating lo the "rustic" sub-category 211 is displayed, . The 
information in the right-most area of the scroll area displays information relating lo the 
••coastal" sub-category. In Figure I, information for the "coastal" sub-calegmy was 
displayed in the left-most portion of the scroll area. Thus, the displaying or ibe information 
relating to the •'coastal'* sub-category on the right of the scroll area corresponds to rotating 
scrolling, that is, the last information is followed by the first information and vice versa when 
scrolling in Ihe other direction. The information in Ihe sub-category information area 
corresponds to the sub-category that was last selected by the user. 
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t'jguic 3 illustrates a web page »>» lhc uscr hos movcd ,hc curaor over 
information for a new sub-catcgory in the carousel. Web page 300 contains the scroll area 
302 that corresponds to the scroll aiea of Figure 2. The sub-category information area 305, 
however, contains information relating to the "iwiic" sub-category, rather than the "English 
country" sub-category. When a user moves the cursor over the information 311 for the 
■■fustic" sub-category, the display system displays additional information relating to that sub- 
calqjory in the sob-category information area. 

Figure 4 illustrates a web page in which a uscr has selected to browse down the 
hierarchy by selecting information for a sub-category in the carousel. Web page 400 
contains a scroll area 402 with information relating to sub-categories of the "English 
country" category. In this example, die sub-categnrics of the "English country" category me 
"living room" and "bedroom." In this example, the scroll area also contains information 
relating to items within tltc -living room" and "bedroom" sub-categories, that is, the lowest 
level categories and the items within each of those categories are displayed together within 
the carousel. T1w information 407 relates to the "living room" sub-category. The 
itifoimalion areas 408-412 contain information related to items within the "living room" sub- 
category. For example, information area 4011 contains the image of n sofa that is currently 
described in sub-catcgory information area 405. Although in this example, the display 
system is displaying information relating ro a tear subcategory along with the items within 
that subcategory at the same time, one skilled in the an would appreciate tbnt the leaf sub- 
categories could be displayed by thcmwlves in U*e scroll area and the information relating to 
the items within lite leaf wb-categories could be display^ ** cn ,bc tofon™'«>» rc,a " n t m 
that leaf sub-category is selected. 

Figure 5 illustrates a web page after a user has selected the "living ruwn" sub- 
category. Web page 500 includes the sub-categoty information area that contains additional 
information about the 'living room" sub-catcgory. The display system displays this 
additional information when a user moves the cursor over the information area 507 for the 
"living room" sub-categnry in the scroll area 502, 

Figure 6 aiirstratcs a web page after a uscr has selected an item wittiin a sub- 
category. Web page 000 includes a sub-category information area 605 that contains 
additional information about the item described in information area 609 of the scroll area 
602. The display system displays this additional information when a user moves the cursor 
over dte jnformtttion area 609. 
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Figure 7 is a block diagram illustrating components of the display system in 
one embodiment. The client computers 701 and the server computer 703 are interconnected 
via the Internet 702. The computers may include a central processing unit, memory, input 
devices keyboard and pointing device), output devices (e.g., display devices), and 
storage devices (e.g., disk drives). The memory and storage devices are computer-readable 
media that may contain computer instructions that implement the display system. The client 
computers may include a browser to access web pages of the server computer via the 
Internet. The server computer implements the display system and includes a conventional 
server engine 705. a product (item) database 706, a product hierarchy 707, and a generate 
web pages component 708. The server cngino receives requests for resources (e.g. web 
pages) via the Internet and coordinates the gencratjon and transmission of the resources. The 
generate web pages component receives requests for web pages corresponding to categories 
within the product hierarchy and generates web pages for those categories. 

One skilled in the art will appreciate the concepts of the display system can he 
used in environments other than the World Wide Web. For example, the display system can 
generate displays that use a carousel to display hierarchical information without using web 
pages by directly writing information to a display or by generating display pages (other than 
HTML-based web pages) fur controlling the display of inforroalioa Also, various 
communication channels, other than the Internet may be used such as a local area network, a 
wide area network, or a point-to-point, dial-up connection. The server system may also 
comprise any combination of hardware or software that can support- the display system. In 
particular, the web server may actually include multiple computers. A client system may 
comprise any combination of hardware and software that interacts with the server system 

Figure 8 is a block diagram illustrating a portion of an example hierarchy. 
Each entity in the hierarchy is represented by a node. In this example, the portion of the 
hierarchy corresponds to lite sub-categories relating to a furniture store, The "furniture 
store" category is represented by node 801. The "furniture store" cutegoiy has tlw sub- 
categories of "linglish country," "urban," "rustic," "coastal," and "classic" as represented by 
nodes 802-806. respectively. The "fcnglish country" subcategory has sub-categories that 
include the "bedroom" sub-category and the "living room" sub-category as represented by 
nodes 807-808. The "living room" sub-category includes a sofa item and a box item as 
represented by leaf nodes 809-810. 
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Figure 9 is a block diagram illustrating the contents of a node in the example 
hierarchy The node 901 corresponds to a category within the hierarchy. The node contains 
a node image 902, a node description 903, a node title 904, children background image 905, 
and o child node tabic 906. "Hie display system uses the node image ns the information to 
display .in the scroll area for the category or item. The display system displays the node 
description in the sub-category information area when that category is selected by moving 
the cursor over the information area for that category. The node title is used to display the 
name or the category. The display system may overlay of the children background image 
over the images of the sub-catcgorics for that category. Hie child node table contains 
pointers to the child nodes. 

Figure 10 is a flow diagram illustrating the processing of generating a web page 
for a specific category. The function thai performs this processing is passed in the identifier 
of the category. The identifier of a category may include the name of each node within the 
hierarchy from the root node to the node representing that category. In step 1001, the 
function locates the category node in the product hierarchy. The' category node may he 
located by traversing rhe hierarchy starling from the root node and visiting each node 
indicated in the identifier of the passed category. In steps 1002-1005, the function loops 
retrieving information relating to a sub-category of the passed category. In step 1002, the 
function selects the next child node of the located node. In step 1 003, if all flic child nodes 
have already been selected, the (unction continues arstep 1004. else the function continues at 
step 1006. In step 1004. the function adds the link to the image of the selected child node to 
the web page. In step 1005, the function adds the description of the selected child node to 
the web page and loops to step 1002 to select the next child and loops to step 1002 to select 
the next child node. Although the description is added to the web jwgc, it may not be visible 
until the coacsnonding category is selected. In step 1006, the function adds the description 
of the located node to the category information area of the web page. In step 1007; rhe 
function adds the hierarchy path to the category to the hierarchy area of the web page. This 
step corresponds to the storing of the information in the hierarchy arcs of a web page. In 
step 1008, the function adds the speed control area to the web page. In step 1008, the 
function adds the background image of the category to its child images and then completes. 
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ligurc 11 is a flow diagram illustrating the processing to advance the display 
within the scroll area. This function that implements this processing executes on a client 
computer and is invoked frequently (<>.#, every lOlh of a second) so tbal the scrolling can be 
aflected with minimal flickering. In step HOI, the function calculates the time since the 
scroll area was last updated. In step 1 102, the function calculates the number of pixels to 
advance the images in the scroll area based on the scrolling speed in pixels per second. In 
step 1 103. the function determines whjt pixtfSf the scroll area information is to be displayed 
at the ceiitw of the scroll area. The pixels may be numbered from the start to the end of the 
infbrrmiuoa Since die start follows the end. the center point is the remainder of ihe current 
center plus the number of pixels to advance divided by the length of the information to be 
displayed in the carousel. In step 1 104, the function generates the carousel image to be 
displayed. In step 1 105, the function displays the generated carousel image and completes. 

figure 12 is a flow diagram illustrating processing for determining Ihe speed 
based on selection of tltc speed scroll area, in step 1201. the function determines the 
distance between the position of tltc cursor and roe centra position of the speed scroll area. 
In step 1202, the function sets the speed and direction of the scrolling. The direction is 
indicated by the sign (/.«.. positive or negative) of the speed. The function then completes. 

l-rom the foregoing, it will be appreciated that although specific embodiments 
of the purchasing system have been described for purposes of illustration, various 
modifications may be made without deviating from the spirit and the scope or the invention. 
Accordingly, the invention is not limited except by the following claims. 
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4 . Brief Description of too Drawings 

Figure 1 illustrates the layout of a web page thai uses a carousel. 
Figure 2 illustrates die scrolling of the infonnation in a caiousel of a web page 
Figure 3 illustrates a web page in which the user has moved the cursor over 
information for a new sub-category in the carousel. 

Figure A illustrates a web page in which a user has selected to browse down the 
hierarchy by selecting information for a sub-category in the carousel., 

Figure 5 illustrates a web page after a user has selected the "living room" sub- 
category. 

Figure 6 illustrates a web page after a user has selected an item within a sub- 
category. 

Figuie 7 is a block diagram illustrating components of the display system in 
one embodiment. 

Figure 8 is a block diagram illustrating a portion of an example hierarchy. 
Figure 9 is a block diagram illustrating the contents of a node in the example 

hierarchy 

Figure 10 is a flow diagram illustrating the processing of generating a weh page 
for a specific category. 

Figure 1 1 is a now diagram illustrating the processing to advance the display 
within die scroll area. 

Figure 12 is a Row diagram illustrating pmccssing for determining the speed 
based on selection of the speed scroll area. 
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1 . Abstract 

A method and >yslem for displaying hierarchically related information. The 
display system displays information related to various categories within the hierarchy on a 
display so that »t scrolls across the display. When a user selects the disployed information 
fbi a category, the display system displays information relating to sut^ategories within die 
selected category so that the information scrolls across the display. The display system 
scrolls the information in a rotating manner such that the start of the information follows the 
end or the information. The d.splay system also dynamically generates display pa&" «><» 
contain the irrfonnatkm. The display system may retrieve the information describing the 
categories and sub-eatcgories f.om a database after u request to retrieve the information is 
received to dynamically generate the display page. 

2 . Representative Drawing 



FIG. 1 



